<template>

    <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
    <!--<div>-->
    <!--<el-card>-->
    <!---->
    <!--</el-card>-->
    <!--</div>-->
    <!--<el-tabs v-model="activepart" type="card" @tab-click="handleClick">-->
    <!--<el-tab-pane label="小时流量" name="myChart">-->
    <!--<div>-->
    <!--<div id="myChart" :style="{width: '1000px', height: '300px'}"></div>-->
    <!--</div>-->
    <!--</el-tab-pane>-->
    <!--<el-tab-pane label="天流量" name="myChart2">-->
    <!--<div>-->
    <!--<div id="myChart2" :style="{width: '1000px', height: '300px'}"></div>-->
    <!--</div>-->
    <!--</el-tab-pane>-->
    <!--<el-tab-pane label="月流量" name="myChart3">-->
    <!--<div>-->
    <!--<div id="myChart3" :style="{width: '1000px', height: '300px'}"></div>-->
    <!--</div>-->
    <!--</el-tab-pane>-->
    <!--</el-tabs>-->
</template>
<style>
    #myChart {
        background: #232343;
    }
</style>
<script>
    export default {
        name: "DataCount",
        data() {
            return {
                myChart: {},
                xdatas: [],
                ydatas: [],
                areasID: [],
                activepart: 'myChart',
                defOption: {
                    title: {
                        text: '当天人流量',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['人流量']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: [],
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'   //这里用参数代替了
                                }
                            }, axisLine: {
                                lineStyle: {
                                    color: '#fff' //更改坐标轴颜色
                                }
                            }
                        },

                    ],
                    yAxis: [
                        {
                            type: 'value',
                            axisLabel: {
                                show: true,
                                textStyle: {
                                    color: '#fff'   //这里用参数代替了
                                }
                            },
                            axisLine: {
                                lineStyle: {
                                    color: '#fff' //更改坐标轴颜色
                                }
                            },
                        }
                    ],
                    series: [
                        {
                            name: '访问量',
                            type: 'line',
                            areaStyle: {},
                            data: [120, 132, 101, 134, 90, 230, 210]
                        },
                    ]
                }, // 默认图标数据
                optionOur: {
                    xAxis: [{}],
                    series: [
                        {
                            data: []
                        },
                    ]

                }, // 按照小时
                optionDay: {
                    xAxis: [{}],
                    series: [
                        {
                            data: []
                        },
                    ]
                }, //按照天
                optionMonth: {
                    xAxis: [{}],
                    series: [
                        {
                            data: []
                        },
                    ]
                } //按照月
            }
        },
        mounted() {
            this.getecharData()
        },
        methods: {
            getecharData() {
                let _this = this;
                this.drawLine();
                this.$api.GetAllAreas({onlyArea: true}).then((res) => {
                    res.data[0].areaList.forEach(item => {
                        _this.areasID.push(item.id);
                    })
                    this.ByHours()
                })
            },
            ByHours() {
                let nowday = this.$moment().format('YYYY-MM-DD');
                this.$api.reportTotayHoursCount({
                    areaIds: this.areasID
                }).then((res) => {
                    let hourData = []
                    res.data.forEach(item => {
                        hourData.push(item.count);
                    })
                    let arr = []
                    for (let i = 0; i < 24; i++) {
                        arr.push(i + '点')
                    }
                    this.optionOur.xAxis[0].data = arr
                    this.optionOur.series[0].data = hourData
                    console.log(this.optionOur)
                    console.log(this.defOption)
                    this.myChart.setOption(this.optionOur)
                }).catch((err) => {
                    console.log(err)
                })
            },
            ByDays() {
                let nowday = this.$moment().format('YYYY-MM');
                let lastMonth = this.$moment().endOf('month').format("YYYY-MM-DD")
                let endmonthDay = this.$moment().endOf('month').format("DD");
                let arr = []
                for (let i = 1; i <= endmonthDay; i++) {
                    arr.push(i + '号')
                }
                this.optionDay.xAxis[0].data = arr
                this.$api.GetDatasByDays({
                    areaIds: this.areasID,
                    startTime: nowday + '-01',
                    endTime: lastMonth
                }).then((res) => {
                    let hourData = []
                    res.data.forEach(item => {
                        hourData.push(item.count);
                    })
                    this.optionDay.series[0].data = hourData
                }).catch((err) => {
                    console.log(err)
                })
            },
            ByMounths() {

                let nowday = this.$moment().format('YYYY');
                let arr = []
                for (let i = 1; i <= 12; i++) {
                    arr.push(i + '月')
                }
                this.optionMonth.xAxis[0].data = arr
                this.$api.GetDatasByMounths({
                    areaIds: this.areasID,
                    startTime: nowday + '-01',
                    endTime: nowday + '-12'
                }).then((res) => {
                    let hourData = []
                    res.data.forEach(item => {
                        hourData.push(item.count);
                    })
                    this.optionMonth.series[0].data = hourData
                }).catch((err) => {
                    console.log(err)
                })
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('myChart'))
                this.myChart = myChart;
                // 绘制图表
                myChart.setOption(this.defOption);
            }
        }
    }
</script>
